;(function(win,doc,undefined){
    var iosStyleSelect  = function(temp){
    this.id = temp.id||"ios-select";
    this.height = temp.height||380;
    this.width = temp.width||50;
    this.optList = temp.data||[
                                {'value':'1','text':'01'},
                                {'value':'2','text':'02'},
                                {'value':'3','text':'03'},];
    this.startY;
    this.isdrag=false;
    this.opt_angles=[];
    this.initSelect();
}
iosStyleSelect.prototype = {
    constructor:iosStyleSelect,//构造器指向构造函数；这行其实不写没啥毛病；不过有时候防止构造器指向Object的情况；你还是装逼写上吧；
    initSelect:function(){
        var _self = this;
        var e = e || win.event;
        //ul
        var fa_ul=document.createElement("ul");
        _self.addClass(fa_ul,"ios-select");
        fa_ul.setAttribute('id',_self.id);
        fa_ul.style.height=_self.height+"px";
        fa_ul.style.width=_self.width+"px";
        //line
        var div_angle=2*Math.PI/_self.optList.length;
        var h=_self.height*Math.sin(div_angle/2);
        var line_up=document.createElement("div");
        var line_down=document.createElement("div");
        _self.addClass(line_up,"line");
        _self.addClass(line_down,"line");
        line_up.style.top=(_self.height-h)/2+"px";
        line_down.style.top=(_self.height-h)/2+h+"px";
        line_up.style.width=_self.width+"px";
        line_down.style.width=_self.width+"px";
        fa_ul.appendChild(line_up);
        fa_ul.appendChild(line_down);
        //li
        for(var i=0;i<_self.optList.length;i++){
            var ch_li=_self.createOption(i+1,_self.optList[i],_self.height,div_angle);
            fa_ul.appendChild(ch_li);
        }
        //btn
        var btn=document.createElement("div");
        btn.innerHTML = "提交";
        btn.setAttribute('id','submit');
        _self.addClass(btn,"btn");
        //add elements to html
        var container=document.getElementsByClassName("ios-select-container")[0];
        container.appendChild(fa_ul);
        container.appendChild(btn);
        //禁止文档选中
        container.onselectstart = function(){return false;}
        //set options' position
        var opt_list=document.getElementById(_self.id).getElementsByClassName("ios-select-opt");
        var selected_opt=_self.getElementByAttr(opt_list,"selected","selected");
        _self.setOptionPosition(selected_opt,_self.height,div_angle,0);
        _self.addClass(selected_opt,"ios-select-opt-selected");
        var start_id=selected_opt.getAttribute("id");
        var start_angle=0;
        _self.opt_angles.push({"id":parseInt(start_id),"angle":start_angle});
        //console.log(start_id);
        for(var i=0;i<_self.optList.length-1;i++){
            var this_id=(i+parseInt(start_id))%_self.optList.length+1;
            //console.log(this_id);
            var this_opt=_self.getElementByAttr(opt_list,"id",this_id);
            var this_angle=-(start_angle+(this_id-start_id)*180/Math.PI*div_angle)%360;
            //console.log(this_angle);
            if(this_angle<0){
                this_angle+=360;
            }
            _self.setOptionPosition(this_opt,_self.height,div_angle,this_angle);
            _self.opt_angles.push({"id":this_id,"angle":this_angle});
        }
        //提交
        btn.onclick=function(){
            var opt_list=document.getElementById(_self.id).getElementsByClassName("ios-select-opt");
            for(var i=0;i<opt_list.length;i++){
                    if(opt_list[i].getAttribute("selected")=="selected"){
                        alert(opt_list[i].value);
                    }
            }
        };
        // 鼠标按下
        fa_ul.onmousedown = function(e) {
            _self.startY = e.pageY;
            _self.isdrag=true;
        };
          // 鼠标移动
          doc.onmousemove = function(e) {
             if(_self.isdrag){
                 // 调整option转角
                var dff_Y=e.pageY-_self.startY;
                //drag_h=dff_Y;
                var dff_angle=360*dff_Y/(Math.PI*_self.height);
                //console.log(dff_angle);
                var opt_list=document.getElementById(_self.id).getElementsByClassName("ios-select-opt");
                var d_angle=2*Math.PI/opt_list.length;
                for(var i=1;i<=opt_list.length;i++){
                    var this_opt=_self.getElementByAttr(opt_list,"id",i);
                    //console.log(this_opt);
                    var this_angle=_self.getObjectByAttr(_self.opt_angles,"id",i).angle;
                    var on_angle=(this_angle-dff_angle)%360;
                    
                    if(on_angle<0){
                        on_angle+=360;
                    }
                    //console.log(on_angle);
                    _self.setOptionPosition(this_opt,_self.height,d_angle,on_angle);
                    //opt_angles.push({"id":this_id,"angle":this_angle});
                    
                }
             }
        }; 
        
        // 鼠标抬起
        doc.onmouseup = function(e) {
            _self.isdrag=false;
            
            var opt_list=document.getElementById(_self.id).getElementsByClassName("ios-select-opt");
           
            var div_angle=2*Math.PI/opt_list.length;
            var select_opt;
            //获取被选中option
            for(var i=0;i<opt_list.length;i++){
                if(_self.isHaveClass(opt_list[i],"ios-select-opt-selected")){
                    select_opt=opt_list[i];
                }
            }
            var start_id=select_opt.getAttribute("id");
            var start_angle=0;
            select_opt.setAttribute('selected',"selected");
            _self.setOptionPositionMove(start_id,_self.height,div_angle,0,20);
            
            //修改id-angle对象
            /*var select_id_angle=getObjectByAttr(opt_angles,"id",start_id);
            select_id_angle.angle=start_angle;*/
            //console.log(start_id);
            for(var i=0;i<opt_list.length-1;i++){
                var this_id=(i+parseInt(start_id))%opt_list.length+1;
                //console.log(this_id);
                var this_opt=_self.getElementByAttr(opt_list,"id",this_id);
                var this_angle=-(start_angle+(this_id-start_id)*180/Math.PI*div_angle)%360;
                //console.log(this_angle);
                this_opt.removeAttribute("selected");
                if(this_angle<0){
                    this_angle+=360;
                }
                _self.setOptionPositionMove(this_id,_self.height,div_angle,this_angle,20);
                //修改id-angle对象
                /*var this_id_angle=getObjectByAttr(opt_angles,"id",this_id);
                this_id_angle.angle=this_angle;*/
            }
        };

    },
    
   isHaveClass:function(element,classname){
        var allClassName = element.className.split(" ");
            for (var i = 0; i < allClassName.length; i++) {
                //console.log(1+":"+trim(allClassName[i]));
                if(this.trim(allClassName[i]) == classname){
                    return true;
                }
            }
            return false;
    },

    trim:function(str){ //删除左右两端的空格
　　     return str.replace(/(^\s*)|(\s*$)/g, "");
　　 	},

    addClass:function(element,value){
        if(!element.className){
            element.className=value;
        }else{
            var allClassName = element.className.split(" ");
            var flag=false;
            for (var i = 0; i < allClassName.length; i++) {
                if(allClassName[i] == value){
                    flag=true;
                }
            }
            if(!flag){
                newClassName=element.className;
            newClassName+=" ";
            newClassName+=value;
            element.className=newClassName;
            }
        }
    },

    removeClass:function(elem,classname){
         //首先进行初次判断目标元素是否存在类名
         //如果有开始执行具体操作
         //如果没有调用控制台报错
         if(elem.className != ""){
             //先把目标元素的所有类名保存在数组中
             //类名的存在是以空格隔开的 所以调用split()方法传入一个空格参数
            var allClassName = elem.className.split(" ");
            //console.log("第一次赋值后class数量为：" + allClassName);
            var result;//完成操作后保存类名（在以后调用）
            var listClass;//保存修改过后的数组

            //1.首先遍历一次所有类名
            for (var i = 0; i < allClassName.length; i++) {
                if(allClassName[i] == classname){
                    //如果在所有类名里面找到要删除的类名执行如下操作
                    //将对应的类名删除，调用splice方法，第一个参数是要删除元素的索引
                    //第二个参数是删除元素的个数
                    allClassName.splice(i,1);
                    
                }

            }
            
            //把 allClassName 数组赋值给 listClass 数组
            listClass = allClassName;
            //遍历listClass 数组
            for (var j = 0; j < listClass.length; j++) {
                //把第一个数组元素赋值给 result时要直接赋值不然会出现undefined
                //之后加上空格因为类名的存在形式就是用空格分隔的
                if (j == 0) {
                    result = listClass[j];
                    result += " ";
                }else{
                    //除第一个以外的元素就可以用 加法运算保存在result字符串里面
                    result += listClass[j];
                    result += " ";
                }
            }
            
           // console.log("处理后的listClass数量" + listClass);
            elem.className = result;//将目标元素的类名重新被 result 覆盖掉
            
         }else{
             //console.log("目标元素没有存在的类名")
         }
         

    },
    
    getElementByAttr:function(arr,attr,value){
        for(var i=0;i<arr.length;i++){
            if(arr[i].getAttribute(attr)==value){
                return arr[i];
            }
        }
        return false;
    },

    getObjectByAttr:function (arr,attr,value){
        for(var i=0;i<arr.length;i++){
            if(arr[i][attr]==value){
                return arr[i];
            }
        }
        return false;
    },
    //createOption 参数列表：(选项id、选项数据、父容器高度、平均角(弧度制))
    createOption:function (id,e_data,f_height,angle){
        var c_li=document.createElement("li");
        var li_text=document.createTextNode(e_data.text);
        var h=f_height*Math.sin(angle/2);
        c_li.appendChild(li_text);
        c_li.setAttribute('id',id);
        c_li.setAttribute('value',e_data.value);
        if(e_data.selected){
            c_li.setAttribute('selected',"selected");
        }
        this.addClass(c_li,"ios-select-opt");
        c_li.style.height=h+"px";
        c_li.style.lineHeight=h+"px";
        return c_li;
    },
    
    //setOptionPosition 参数列表：(选项元素、父容器高度、平均角(弧度制)、选项倾斜角(角度制))
    setOptionPosition:function(opt,f_height,angle,li_angle){
        var h=f_height*Math.sin(angle/2);
        var top=f_height*(1-Math.cos(Math.PI/2-Math.PI/180*li_angle-angle/2))/2-h*(1-Math.cos(Math.PI/180*li_angle))/2;
        opt.style.top=top+"px";
        opt.style.webkitTransform="rotateX("+li_angle+"deg)";
        opt.style.mozTransform="rotateX("+li_angle+"deg)";
        opt.style.transform="rotateX("+li_angle+"deg)"; 
        //console.log(li_angle);
        if((li_angle>90&&li_angle<270)){
            this.addClass(opt,"none");
        }
        else{
            this.removeClass(opt,"none");
            if(top+h/2>(f_height-h)/2&&top-h/2<(f_height-h)/2){
                this.addClass(opt,"ios-select-opt-selected");
                //console.log(opt.getAttribute("id")+" add");
            }
            else{
                this.removeClass(opt,"ios-select-opt-selected");
                //console.log(opt.getAttribute("id")+" remove");
            }
        }
        
    },
    setOptionPositionMove:function(opt_id,f_height,angle,li_angle,interval){
        var opt=document.getElementById(opt_id);
        if(opt.movement){
            clearTimeout(opt.movement);
        }
        var pos_style=opt.style.transform;
        var pos=parseInt(pos_style.slice(8).substring(0,pos_style.slice(8).length-4));
        a_li_angle=parseInt(li_angle);
        if(pos<0){
            pos=pos+360;
        }
        //console.log(pos);
        if(pos==a_li_angle){
            //修改id-angle对象	
            this.setOptionPosition(opt,f_height,angle,li_angle);
            var this_id_angle=this.getObjectByAttr(this.opt_angles,"id",opt_id);
                this_id_angle.angle=li_angle;
            return true;
        }
        if(Math.abs(pos-a_li_angle)<180){
            if(pos<a_li_angle){
                dist=Math.ceil((a_li_angle-pos)/10);
                pos+=dist;
            }
            if(pos>a_li_angle){
                dist=Math.ceil((pos-a_li_angle)/10);
                pos-=dist;
            }
        }
        else{
            if(pos<a_li_angle){
                a_li_angle=-360+a_li_angle;
                dist=Math.ceil((pos-a_li_angle)/10);
                pos-=dist;
            }
            if(pos>a_li_angle){
                pos=-360+pos;
                dist=Math.ceil((a_li_angle-pos)/10);
                pos+=dist;
            }
        }
        this.setOptionPosition(opt,f_height,angle,pos);
        //var repeat="this.setOptionPositionMove('"+opt_id+"',"+f_height+","+angle+","+li_angle+","+interval+")";
        opt.movement=setTimeout(this.setOptionPositionMove(opt_id,f_height,angle,li_angle,interval),interval);
        //修改id-angle对象
        var this_id_angle=this.getObjectByAttr(this.opt_angles,"id",opt_id);
        this_id_angle.angle=pos;
    }
};

win.iosStyleSelect = iosStyleSelect;
}(window,document));
